<template>
	<view class="u-skeleton">
		
			<u-swiper class="u-skeleton-rect" :list="slides" name="img_url" height="320" ></u-swiper>
		
		
		
		<u-tabs-swiper bar-width="100" ref="tabs" :list="paixuList" :is-scroll="false" @change="change" :current="bl"></u-tabs-swiper>
		
		<u-row gutter="16">
					<u-col span="6" v-for="itme in goods.length!==0 ? goods :[{},{},{},{}]">
						
						<goods-card :itme="itme"></goods-card>
							
					</u-col>
					
				</u-row>
				
				<!--引用骨架屏组件-->
				<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				imgList:["https://oss.shop.eduwork.cn/ad/2020-0820-5f3dfe85ae3fd.png",
				"https://oss.shop.eduwork.cn/ad/2020-0825-5f44b35f595a4.png"
				],
				paixuList:[
					{name:"默认"},
					{name:"销量"},
					{name:"推荐"},
					{name:"价格"},
					
					
				],
				bl:0,
				slides:[],
				goods:[],
				chudi:1,
				loading:false
				
			}
		},
		//加载数据
	async onLoad() {
			//this.$u.utils.isLogin()
		
		this.getshuju()
		
	
},
	

		
		methods:{
			//分类点击事件
			change(index){
				console.log(index);
				this.bl=index;
				//清空之前的数据不然新的分类数据会加到数据下面分页信息也清空
				this.goods=[];
				this.chudi=1;
				this.getshuju();
			},
			//获取数据
		  async	getshuju(){
			  //请求数据之前显示骨架屏
			  this.loading=true;
			  //设置分页
				const params ={
					page:this.chudi
				}
				//将分页参数传到api
				
				if(this.bl==1) params.sales = 1
				if(this.bl==2) params.recommend = 1
				if(this.bl==3) params.price = 1
				const res = await this.$u.api.getSearch(params)
				//得到数据隐藏骨架屏
				this.loading = false;
				this.goods=[...this.goods,...res.goods.data];
				//原数据加上新数据
				this.slides=res.slides;
			
		},
		
	
		//触底加载事件
		onReachBottom() {
			//重新请求数据带上分页信息
			this.chudi=this.chudi+1;
			this.getshuju();
			
		}
			},
			}
</script>

<style lang="scss" scoped>
	.splj{
	 padding: 40rpx;
	 margin-top: 30rpx;
	 box-shadow: 0 12rpx 20rpx 0 rgba(0,0,0, .1);
	 .title{
		 margin:10rpx 0;
		 font-size: 32rpx;
		 width: 100%;
	 }
	 .jiage{
		 color: red;
	 }
	 .xiaoliang{
		 color: #888;
	 }
	}
	
</style>
